<template>
  <div class="form-select">
    <!-- start 下拉模式 -->
    <template>
      <el-select
        :id="`form_${field.fieldName}`"
        :placeholder="placeholder"
        ref="elSelect"
        filterable
        :value="value"
        @change="input"
        clearable
      >
        <el-option
          v-for="(item, index) in wikiList"
          :key="`${item.value}_${index}`"
          :label="item.title"
          :value="item.id"
        >
          <slot name="option" :option="item"></slot>
        </el-option>
      </el-select>
    </template>

  </div>
</template>
  
<script>
import FormMixin from '@src/component/form/mixin/form';
import { getDocumentList } from '@src/api/Repository'
export default {
  name: 'FormSelect2Build',
  mixins: [FormMixin],
  props: {
    value: [String, Number, Array],
    source: {
      type: Array
    },
    clearable: {
      type: Boolean,
      default: true
    },
    disabledJustForSelect:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      wikiList: [],
      newValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.newValue = newValue
    }
  },
  mounted() {
    // 先不允许分页，所以pageSize调了一个大值
    let params = {
      pageNum: 1,
      pageSize: 1000
    }
    getDocumentList(params).then(result => {
      if (result.success) {
        this.wikiList = result?.result?.list || [];
      }
    })
  },
  methods: {
    input(newValue){
      let oldValue = null;

      let data = this.wikiList.filter( item => {
        return item.id === newValue
      })
      this.$emit('update', {newValue, oldValue, field: this.field, valueObj: data});
      this.$emit('input', newValue);
    }
  }
}
</script>
  
  
  <style lang="scss">
  .form-select{
    width: 100%;
  
    .el-select{
      width: 100%;
  
      .el-input__inner{
        padding-left: 10px;
      }
  
      // 超出长度多行显示
      .el-tag {
        height: auto;
        .el-select__tags-text {
          white-space: pre-wrap;
        }
      }
      // 超出单行显示'...'
      // .el-tag {
      //   position: relative;
      //   max-width: 100%;
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      //   .el-select__tags-text {
      //     white-space: nowrap;
      //     text-overflow: ellipsis;
      //     overflow: hidden;
      //     padding-right: 10px;
      //     display: inline-block;
      //     max-width: 100%;
      //   }
      //   .el-tag__close {
      //     position: absolute;
      //     right: 0;
      //     top: 4px;
      //   }
      // }
  
    }
  }
  </style>
  
  <style lang="scss" scoped>
  .el-radio-group,
  .el-checkbox-group {
    width: 100%;
  
    label {
      width: auto;
      display: inline-block;
      margin-right: 20px;
      padding-left: 0;
    }
  
    ::v-deep .el-checkbox__label,
    ::v-deep .el-radio__label {
      overflow-wrap: break-word;
      text-overflow: ellipsis; 
      white-space: normal;
      word-break: break-all;
      padding-left: 6px;
    }
  }
  </style>